<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学期教材管理</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <link rel="stylesheet" href="/element-ui/fonts/element-icons.css">
    <script src="/element-ui/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script src="/element-ui/axios.min.js"></script>
    <style>
        body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif; background-color: #f5f6fa; }
        #app { padding: 20px; background-color: #f5f6fa; }
        .page-title { font-size: 26px; font-weight: bold; color: #333; background: #fff; padding: 24px 20px 12px 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; letter-spacing: 2px; text-align: center; animation: fadeInDown 0.8s ease-out; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-radius: 8px; }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .el-main { padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .el-form-item { margin-bottom: 20px; }
        .el-table { animation: fadeIn 1s ease-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .el-table__row { transition: all 0.3s ease; }
        .el-table__row:hover { background-color: #f5f7fa !important; transform: scale(1.005); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .pagination-container { margin-top: 20px; text-align: right; padding: 10px 0; background: #fff; border-top: 1px solid #eee; border-radius: 0 0 8px 8px; }
        .action-btn-group { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
        .action-btn-group .el-button { font-size: 13px; min-width: 56px; padding: 7px 12px; }
    </style>
</head>
<body>
    <div class="page-title">学期教材管理</div>
    <div id="app">
        <el-container>
            <el-main>
                <!-- 搜索表单 -->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="教材名称">
                        <el-input v-model="searchForm.bookName" placeholder="请输入教材名称"></el-input>
                    </el-form-item>
                    <el-form-item label="学期">
                        <el-select v-model="searchForm.term" placeholder="请选择学期" clearable>
                            <el-option label="2024春季" value="2024春季"></el-option>
                            <el-option label="2024秋季" value="2024秋季"></el-option>
                            <el-option label="2025春季" value="2025春季"></el-option>
                            <el-option label="2025秋季" value="2025秋季"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="专业">
                        <el-select v-model="searchForm.major" placeholder="请选择专业" clearable>
                            <el-option label="计算机系" value="计算机系"></el-option>
                            <el-option label="金融系" value="金融系"></el-option>
                            <el-option label="电子商务系" value="电子商务系"></el-option>
                            <el-option label="大数据系" value="大数据系"></el-option>
                            <el-option label="人工智能系" value="人工智能系"></el-option>
                            <el-option label="艺术设计系" value="艺术设计系"></el-option>
                            <el-option label="医学系" value="医学系"></el-option>
                            <el-option label="环境设计系" value="环境设计系"></el-option>
                            <el-option label="音乐系" value="音乐系"></el-option>
                            <el-option label="老年管理系" value="老年管理系"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button type="success" @click="add">新增</el-button>
                    </el-form-item>
                </el-form>
                <!-- 数据表格 -->
                <el-table :data="groupedData" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="term" label="学期" width="120"></el-table-column>
                    <el-table-column prop="major" label="专业" width="120"></el-table-column>
                    <el-table-column label="教材名称">
                        <template slot-scope="scope">
                            <span v-for="(book, idx) in scope.row.books" :key="book.bookId">
                                {{ book.isbn ? (book.isbn + '-') : '' }}{{ book.bookName }}<span v-if="idx < scope.row.books.length - 1">，</span>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="260">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleEditGroup(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDeleteGroup(scope.row)">批量删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
                <el-dialog title="选择要删除的教材" :visible.sync="deleteDialogVisible" width="400px">
                    <el-checkbox-group v-model="deleteSelectedBooks">
                        <el-checkbox v-for="book in deleteDialogBooks" :key="book.bookId" :label="book.bookId">
                            {{ book.isbn ? (book.isbn + '-') : '' }}{{ book.bookName }}
                        </el-checkbox>
                    </el-checkbox-group>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="deleteDialogVisible = false">取消</el-button>
                        <el-button type="danger" @click="confirmDeleteBooks">确认删除</el-button>
                    </span>
                </el-dialog>
                <el-dialog title="编辑学期与专业" :visible.sync="editDialogVisible" width="400px">
                    <el-form :model="editForm" label-width="80px">
                        <el-form-item label="学期">
                            <el-select v-model="editForm.term" placeholder="请选择学期">
                                <el-option label="2024春季" value="2024春季"></el-option>
                                <el-option label="2024秋季" value="2024秋季"></el-option>
                                <el-option label="2025春季" value="2025春季"></el-option>
                                <el-option label="2025秋季" value="2025秋季"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专业">
                            <el-select v-model="editForm.major" placeholder="请选择专业">
                                <el-option label="计算机系" value="计算机系"></el-option>
                                <el-option label="金融系" value="金融系"></el-option>
                                <el-option label="电子商务系" value="电子商务系"></el-option>
                                <el-option label="大数据系" value="大数据系"></el-option>
                                <el-option label="人工智能系" value="人工智能系"></el-option>
                                <el-option label="艺术设计系" value="艺术设计系"></el-option>
                                <el-option label="医学系" value="医学系"></el-option>
                                <el-option label="环境设计系" value="环境设计系"></el-option>
                                <el-option label="音乐系" value="音乐系"></el-option>
                                <el-option label="老年管理系" value="老年管理系"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmEditGroup">保存</el-button>
                    </span>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    searchForm: { bookName: '', term: '', major: '' },
                    tableData: [],
                    groupedData: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    loading: false,
                    booksMap: {},
                    deleteDialogVisible: false,
                    deleteDialogBooks: [],
                    deleteDialogTerm: '',
                    deleteDialogMajor: '',
                    deleteSelectedBooks: [],
                    editDialogVisible: false,
                    editForm: { term: '', major: '', oldTerm: '', oldMajor: '' }
                }
            },
            created() {
                this.booksMap = {};
                axios.get('/termbook/api/allBooks').then(res => {
                    res.data.forEach(book => {
                        this.booksMap[book.id] = book;
                    });
                    this.fetchData();
                });
            },
            methods: {
                fetchData() {
                    this.loading = true;
                    const params = { pageNum: this.currentPage, pageSize: this.pageSize, ...this.searchForm };
                    axios.get('/termbook/api/list', { params })
                        .then(response => {
                            this.tableData = response.data.list;
                            this.total = response.data.total;
                            // 分组处理
                            const groupMap = {};
                            this.tableData.forEach(item => {
                                const key = item.term + '||' + item.major;
                                if (!groupMap[key]) {
                                    groupMap[key] = { term: item.term, major: item.major, books: [] };
                                }
                                // 获取ISBN
                                let isbn = '';
                                if (item.bookId && this.booksMap && this.booksMap[item.bookId]) {
                                    isbn = this.booksMap[item.bookId].isbn;
                                }
                                groupMap[key].books.push({ bookId: item.bookId, bookName: item.bookName, isbn });
                            });
                            this.groupedData = Object.values(groupMap);
                        })
                        .catch(error => {
                            console.error('Error fetching data:', error);
                            this.$message.error('获取数据失败');
                        })
                        .finally(() => { this.loading = false; });
                },
                search() { this.currentPage = 1; this.fetchData(); },
                resetForm() { this.searchForm = { bookName: '', term: '', major: '' }; this.search(); },
                handleSizeChange(val) { this.pageSize = val; this.fetchData(); },
                handleCurrentChange(val) { this.currentPage = val; this.fetchData(); },
                add() { window.location.href = '/termbook/add'; },
                handleDeleteGroup(row) {
                    this.deleteDialogBooks = row.books;
                    this.deleteDialogTerm = row.term;
                    this.deleteDialogMajor = row.major;
                    this.deleteSelectedBooks = [];
                    this.deleteDialogVisible = true;
                },
                confirmDeleteBooks() {
                    if (this.deleteSelectedBooks.length === 0) {
                        this.$message.warning('请选择要删除的教材');
                        return;
                    }
                    this.$confirm('确认删除选中的教材吗？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        axios.post('/termbook/api/deleteBooks', {
                            term: this.deleteDialogTerm,
                            major: this.deleteDialogMajor,
                            bookIds: this.deleteSelectedBooks
                        }).then(res => {
                            if (res.data === 'success') {
                                this.$message.success('删除成功');
                                this.deleteDialogVisible = false;
                                this.fetchData();
                            } else {
                                this.$message.error('删除失败');
                            }
                        }).catch(() => {
                            this.$message.error('删除失败');
                        });
                    });
                },
                handleDetail(row) { window.location.href = `/termbook/detail/${row.id}`; },
                handleEditGroup(row) {
                    this.editForm.term = row.term;
                    this.editForm.major = row.major;
                    this.editForm.oldTerm = row.term;
                    this.editForm.oldMajor = row.major;
                    this.editDialogVisible = true;
                },
                confirmEditGroup() {
                    if (!this.editForm.term || !this.editForm.major) {
                        this.$message.warning('请选择学期和专业');
                        return;
                    }
                    axios.post('/termbook/api/editGroup', {
                        oldTerm: this.editForm.oldTerm,
                        oldMajor: this.editForm.oldMajor,
                        newTerm: this.editForm.term,
                        newMajor: this.editForm.major
                    }).then(res => {
                        if (res.data === 'success') {
                            this.$message.success('修改成功');
                            this.editDialogVisible = false;
                            this.fetchData();
                        } else {
                            this.$message.error('修改失败');
                        }
                    }).catch(() => {
                        this.$message.error('修改失败');
                    });
                }
            }
        });
    </script>
</body>
</html> 